<template>
    <!-- 显示当前count的值 -->
    <div> count的值是：{{ count }}</div>

    <!-- 
      基础事件绑定：
      点击按钮触发addCount函数，无需传参时，事件对象会自动传入
    -->
    <button @click="addCount">+1</button>

    <!-- 
      带参数的事件绑定：
      1. 调用addCountN函数时传入自定义参数（这里是3）
      2. 通过$event关键字显式传递事件对象，供函数内部使用
      3. 注意：如果需要在传参时使用事件对象，必须用$event标识
    -->
    <button @click="addCountN(3, $event)">+3</button>
</template>

<script setup>
// 导入ref函数创建响应式变量
import { ref } from 'vue'

// 响应式变量count，初始值为1
const count = ref(1)

// 无参数的事件处理函数
// 函数自动接收事件对象event作为参数
const addCount = event => {
    count.value++  // 每次点击count+1
    
    // 根据count奇偶性修改触发事件的按钮样式
    // event.target指向当前点击的按钮元素
    if (count.value % 2 === 0) {
        event.target.style.backgroundColor = 'red'
    } else {
        event.target.style.backgroundColor = 'blue'
    }
}

// 带参数的事件处理函数
// 第一个参数n：自定义数值（每次增加的数量）
// 第二个参数event：显式传入的事件对象
const addCountN = (n, event) => {
    count.value += n  // 每次点击count增加n（此处n=3）
    
    // 同样根据count奇偶性修改按钮样式
    if (count.value % 2 === 0) {
        event.target.style.backgroundColor = 'red'
    } else {
        event.target.style.backgroundColor = 'blue'
    }
}

/* 
  带参数事件处理的核心要点：
  1. 当需要传递自定义参数时，在模板中用函数调用的形式传参（如addCountN(3, $event)）
  2. $event是Vue的特殊关键字，代表原生事件对象，必须显式传递才能在函数中使用
  3. 事件处理函数的参数顺序需与模板中的传参顺序一致（先自定义参数，后事件对象）
  4. 此例中两个按钮共用了相同的样式切换逻辑，但增加的数值不同，体现了参数化的灵活性
*/
</script>
    